<template>
<div class="quo-inf-con">
  <div class="base-inf">
    <div class="inf-fir-tit" @click="showInf1(showing1)">
      <div class="inf-fir-tit-img base-inf-img"></div>
      <div class="inf-fir-tit-name">
        <span>基本信息</span>
      </div>
      <div class="inf-fir-tit-logo"></div>
    </div>
    <div class="base-inf-con" v-if="showing1">
      <div class="inf-con-state">
        <div class="round"></div>
        <span>{{quo.state}} </span>
      </div>
      <div class="inf-con-detail">
        <div class="con-detail-body">
          <div class="detail-body-cell">
            <span class="inf-det-name">*客户名称</span>
            <span class="inf-det-con">{{ quo.customerName }}</span>
          </div>
          <div class="detail-body-cell">
            <span class="inf-det-name">*客户角色</span>
            <span class="inf-det-con">{{quo.customerRole}}</span>
          </div>
          <div class="detail-body-cell">
            <span class="inf-det-name">*活动主题</span>
            <span class="inf-det-con">{{quo.activityTheme}}</span>
          </div>
          <div class="detail-body-cell">
            <span class="inf-det-name">*活动配置</span>
            <span class="inf-det-con">{{quo.activityProfile}}</span>
          </div>
          <div class="meetplace" v-for="metplace in metplaces">
            <div class="detail-body-cell">
              <span class="inf-det-name">*活动时间</span>
              <span class="inf-det-con">{{metplace.arrivalTime}}</span>
            </div>
            <div class="detail-body-cell">
              <span class="inf-det-name">*彩排时间</span>
              <span class="inf-det-con">{{metplace.endTime}}</span>
            </div>
            <div class="detail-body-cell">
              <span class="inf-det-name">*活动地点</span>
              <span class="inf-det-con">{{metplace.meetingPlace}}</span>
            </div>
          </div>
          <div class="detail-body-cell">
            <span class="inf-det-name">*活动金额</span>
            <div class="inf-det-con">1,dhbajhbfsakjdhfkJSNM,ABS,FDMNASKJDFBMASJBDFMABSDDMNGBASNMGBM,SBNDGMSABNGDMNASBDGM</div>
          </div>
          <div class="detail-body-cell">
            <span class="inf-det-name">*并发人数</span>
            <span class="inf-det-con">1</span>
          </div>
          <div class="detail-body-cell">
            <span class="inf-det-name">*平台功能</span>
            <span class="inf-det-con">1</span>
          </div>
          <div class="detail-body-cell">
            <span class="inf-det-name">*网络情况</span>
            <span class="inf-det-con">1</span>
          </div>
          <div class="detail-body-cell">
            <span class="inf-det-name">*供电情况</span>
            <span class="inf-det-con">1</span>
          </div>

        </div>
      </div>
    </div>
  </div>
  <div class="per-cho">
    <div class="inf-fir-tit" @click="showInf2(showing2)">
      <div class="inf-fir-tit-img per-inf-img"></div>
      <div class="inf-fir-tit-name">人员安排</div>
      <div class="inf-fir-tit-logo"></div>
    </div>
    <div class="per-chose" v-if="showing2">
      <div class="per-head">
        <span>线上人员</span>
        <button>添加</button>
      </div>
      <div class="online-per-con per-con">
        <div class="per-name-work" v-for="per in person">
          <span>{{per.name}}-{{per.work}}</span>
          <div>X</div>
        </div>
      </div>
      <div class="per-head">
        <span>线下人员</span>
        <button>添加</button>
      </div>
      <div class="downline-per-con per-con">
        <div class="per-name-work" v-for="per in person">
          <span>{{per.name}}-{{per.work}}</span>
          <div>X</div>
        </div>
      </div>
    </div>
  </div>
  <div class="inf-fir-tit">
    <div class="inf-fir-tit-img cacu-inf-img"></div>
    <div class="inf-fir-tit-name">成本核算</div>
    <div class="inf-fir-tit-logo"></div>
  </div>
  <div class="inf-fir-tit">
    <div class="inf-fir-tit-img contract-inf-img"></div>
    <div class="inf-fir-tit-name">合同附件</div>
    <div class="inf-fir-tit-logo"></div>
  </div>
</div>
</template>

<script>
export default {
  name: "quoInfCon",
  data(){
    return{
      showing1:false,
      showing2:false,
    }
  },
  props:{
    quo:{},
    metplaces: []
  },
  methods:{
    showInf1: function (showing1){
      this.showing1 = !showing1
      console.log(this.showing1)
    },
    showInf2: function (showing2){
      this.showing2 = !showing2
      console.log(this.showing2)
    }
  }
}
</script>

<style scoped>

</style>
